<template>
    <div class="hot-news-detail">
        <!-- 顶部标题 -->
        <div class="header">
            <div class="left">
                <img :src="baseUrl + board.icon" alt="logo" class="board-icon" />
                <div class="info">
                    <h2>{{ board.title }} 热点新闻</h2>
                    <p>{{ board.tag }} · 共 {{ board.items.length }} 条</p>
                </div>
            </div>
            <div class="right">
                <span class="update-time">更新时间：{{ formatTime(board.lastUpdate) }}</span>
            </div>
        </div>

        <!-- 新闻列表 -->
        <div class="news-list">
            <div class="news-card" v-for="(item, index) in board.items" :key="index">
                <img v-if="item.image" :src="item.image" alt="news" class="news-image" />
                <div class="news-content">
                    <h3 class="news-title">{{ item.title }}</h3>
                    <p class="news-desc">{{ item.desc }}</p>
                </div>
                <div class="news-footer">
                    <span><icon class="el-icon-view"/> {{ item.views }}</span>
                    <span class="time">{{ item.timeAgo }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            baseUrl: "http://127.0.0.1:9876/upload/",
            board: {
                title: "抖音",
                tag: "热榜",
                icon: "dy.png",
                lastUpdate: new Date(Date.now() - 60 * 60 * 1000),
                items: [
                    {
                        title: "短剧播放量突破2000亿次",
                        desc: "据抖音官方数据显示，平台短剧内容在2025年累计播放量突破2000亿次，同比增长高达65%。业内人士分析，短剧凭借轻量化、快节奏的内容节奏和贴近生活的剧情，吸引了大量年轻用户群体。特别是在职场、情感和都市生活题材方面，创作者通过真实故事和创新叙事获得强烈共鸣。与此同时，短剧行业生态逐渐完善，从编剧、导演到演员均形成专业分工，推动短剧产业走向精品化与规模化发展。",
                        views: "12.3k",
                        comments: 234,
                        timeAgo: "2小时前",
                        image: "https://picsum.photos/seed/a/400/250"
                    },
                    {
                        title: "AI变脸技术引发热议",
                        desc: "近日，抖音平台上一段利用AI换脸技术制作的视频迅速走红，引发社会舆论广泛关注。视频展示了演员与虚拟角色的无缝融合，真实度令人惊叹。但同时，公众也对AI技术可能带来的隐私滥用、虚假信息传播等风险表达担忧。专家指出，应尽快完善AI视频内容的识别与标识机制，建立相关伦理标准和法律约束，以平衡创新与监管的关系，让技术在透明、公正的框架下健康发展。",
                        views: "9.8k",
                        comments: 187,
                        timeAgo: "3小时前",
                        image: "https://picsum.photos/seed/b/400/250"
                    },
                    {
                        title: "旅行vlog最受欢迎榜单出炉",
                        desc: "2025年旅行类vlog在抖音上持续升温，成为年轻人最爱的内容类型之一。数据显示，“环球旅行vlog”话题播放量突破300亿次，创作者们通过镜头记录下世界各地的风光与文化，用生动的故事感染观众。从徒步川藏线的户外博主，到分享日本街头美食的旅游达人，不同风格的vlog吸引了不同受众。业内人士认为，短视频旅游内容正推动‘沉浸式云旅游’兴起，成为文旅产业数字化传播的重要力量。",
                        views: "15.6k",
                        comments: 512,
                        timeAgo: "5小时前",
                        image: "https://picsum.photos/seed/c/400/250"
                    },
                    {
                        title: "DIY建房挑战赛爆火全网",
                        desc: "一场名为“我在乡下建房子”的挑战赛在抖音平台爆火，参与者通过短视频记录自建房全过程，从选址、设计到施工，吸引了数千万网友围观。许多年轻人通过亲手搭建梦想中的小屋，展现出对自然、手作与生活美学的追求。相关话题播放量已突破150亿次，带动了木工、家装等周边内容热度上升。专家认为，这种‘生活实践型内容’体现了Z世代用户的创作表达转变，从“消费内容”走向“生产生活”。",
                        views: "8.5k",
                        comments: 198,
                        timeAgo: "6小时前",
                        image: "https://picsum.photos/seed/d/400/250"
                    },
                    {
                        title: "AI短片入选年度创意榜单",
                        desc: "在2025年抖音创意盛典上，AI生成短片首次入选年度创意榜，成为新兴艺术与科技融合的典范。这类短片由创作者与AI算法共同完成，从脚本撰写到视觉渲染，展现了人工智能在影视创作领域的潜力。短片《梦行者》更是以其独特的叙事方式与超现实画风获得观众一致好评。业内分析，AI创作正在推动短视频从‘个体表达’向‘智能协作’演进，为未来的内容创作带来新的可能性。",
                        views: "11.2k",
                        comments: 299,
                        timeAgo: "1天前",
                        image: "https://picsum.photos/seed/e/400/250"
                    },
                    {
                        title: "抖音电商成交额创新高",
                        desc: "抖音电商最新数据显示，2025年平台总成交额（GMV）同比增长45%，创历史新高。其中，兴趣电商、直播带货及内容种草三大板块成为增长主力。数据显示，生活家电、美妆个护和数码产品是最受欢迎的品类，消费者的购买决策更加依赖于内容信任度。业内人士指出，抖音电商正从‘流量驱动’转向‘内容驱动’，通过算法推荐和社交传播塑造全新的购物生态，为中小商家提供更多增长机会。",
                        views: "20.3k",
                        comments: 654,
                        timeAgo: "2天前",
                        image: "https://picsum.photos/seed/f/400/250"
                    }
                ]
            }

        };
    },
    methods: {
        formatTime(date) {
            const diff = Date.now() - new Date(date).getTime();
            const h = Math.floor(diff / (1000 * 60 * 60));
            if (h === 0) return "刚刚更新";
            if (h < 24) return `${h}小时前更新`;
            return `${Math.floor(h / 24)}天前更新`;
        }
    }
};
</script>

<style scoped>
.hot-news-detail {
    padding: 20px;
    font-family: "Microsoft YaHei", sans-serif;
}

/* 顶部信息 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.left {
    display: flex;
    align-items: center;
}

.board-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    margin-right: 10px;
}

.info h2 {
    font-size: 22px;
    margin: 0;
}

.info p {
    color: #999;
    font-size: 14px;
}

.update-time {
    color: #666;
    font-size: 14px;
}

/* 新闻卡片网格布局 */
.news-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
}

/* 卡片样式 */
.news-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    width: calc(30% - 10px);
    /* 一行3个 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    height: 480px;
    /* 固定高度 */
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* 图片 */
.news-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* 内容部分可滚动 */
.news-content {
    padding: 12px 16px;
    flex: 1;
    overflow-y: auto;
}

.news-title {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 16px;
    color: #222;
}

.news-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* 底部信息 */
.news-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #888;
}

.news-footer .time {
    color: #999;
}
</style>
